<script setup lang='ts'>
import { getClassAll, addClass, type IClass } from '@/api/classApi';
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const classList = ref<IClass[]>([])

defineOptions({
  name: 'VClass',
})

async function fetchClassAll() {
  const result = await getClassAll()
  classList.value = result.data as IClass[]
}

fetchClassAll()


function handleEdit(row: IClass) {
  console.log('编辑', row)
}

function handleDelete(row: IClass) {
  console.log('删除', row)
}


const classForm = ref({
  nickname: ''
})

const dialogVisible = ref(false)

async function handleAddClass() {
  const { code, msg } = await addClass(classForm.value.nickname)
  if (code === 2000) {
    fetchClassAll()
    dialogVisible.value = false
    ElMessage.success(msg)
  } else {
    ElMessage.error(msg)
  }



}

</script>

<template>
  <div class='container'>
    <el-button type="primary" @click="dialogVisible = true">添加班级</el-button>
    <el-table :data="classList" style="width: 100%">
      <el-table-column label="序号" type="index" width="180" />
      <el-table-column prop="nickname" label="班级名称" width="180" />
      <el-table-column prop="nickname" label="操作" width="180">
        <template #default="{ row }">
          <el-button type="text" size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加面板 -->
    <el-dialog v-model="dialogVisible" title="添加班级" width="500">
      <template #footer>
        <el-input placeholder="请输入班级名称" v-model="classForm.nickname"> </el-input>
        <div class="dialog-footer" style="margin-top: 20px;">
          <el-button type="primary" @click="handleAddClass">
            确定
          </el-button>
          <el-button @click="dialogVisible = false">
            取消
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang='scss'></style>